<template>
  <view class="index-page">
    <u-navbar
      title="添加银行卡"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <view class="gh-1">
      <view class="gh-2">添加银行卡</view>
      <view class="gh-5">请确保手机号为银行预留手机号码</view>
      <view class="gh-3">
        输入银行卡号
        <input
          type="number"
          placeholder="输入银行卡号"
          v-model="state.account"
        />
      </view>
      <view class="gh-3">
        预留手机号码
        <input
          type="number"
          placeholder="输入手机号码"
          v-model="state.mobile"
        />
      </view>
      <view class="gh-3">
        验证码
        <view>
          <input
            type="number"
            placeholder="请输入验证码"
            v-model="state.code"
            maxlength="6"
          />
          <view class="code" @click="getCodeClick">
            <text v-if="state.timeShow">获取验证码</text>
            <text v-else>{{ state.count }} s 后获取</text>
          </view>
        </view>
      </view>

      <view class="gh-10">
        <image src="@/static/images/anquan.png" mode=""></image>
        信息安全保障中，信息仅用于身份确认
      </view>
      <u-button
        class="gh-4"
        shape="circle"
        :custom-style="state.customStyle"
        :throttleTime="300"
        @click="addBankCardClick"
        >添加银行卡</u-button
      >
    </view>
  </view>
</template>
<script lang="ts" setup>
import { sendCode, addBankCard } from '@/api/modules/user'
import { isMobile } from '@/utils/validate'
import { onBeforeUnmount, reactive } from 'vue'

const state = reactive({
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  code: '',
  codeM: '',
  // 倒计时
  countDownTime: 60,
  timer: null,
  timeShow: true,
  count: 0,
  mobile: '',
  account: ''
})
//添加银行卡
const addBankCardClick = () => {
  if (!state.account || !state.mobile) {
    uni.showToast({
      title: '请输入完整信息',
      icon: 'error'
    })
    return false
  }
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  addBankCard({ account: state.account })
    .then((result) => {
      uni.showToast({
        title: '操作成功,请登录',
        icon: 'success'
      })
      uni.hideLoading()
      uni.navigateTo({
        url: '/pages/my/my-wallet/bank-card'
      })
    })
    .catch((err) => {
      uni.hideLoading()
      uni.showToast({
        title: err.data.message,
        icon: 'error'
      })
    })
}
//获取短信验证码
const getCodeClick = () => {
  sendCode(state.mobile).then((res) => {
    if (!isMobile(state.mobile)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'error'
      })
      return false
    }
    state.codeM = res.data
    if (!state.timer) {
      state.count = state.countDownTime
      state.timeShow = false
      state.timer = setInterval(() => {
        if (state.count > 0 && state.count <= state.countDownTime) {
          state.count--
          console.log('count----', state.count)
        } else {
          state.timeShow = true
          clearInterval(state.timer as any)
          state.timer = null
        }
      }, 1000) as any
    }
    uni.showToast({
      title: '验证码发送成功,请注意查收',
      icon: 'success'
    })
  })
}

onBeforeUnmount(() => {
  clearInterval(state.timer as any)
})
</script>

<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.gh-10 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 22upx;
  color: #999;

  image {
    width: 20upx;
    height: 24upx;
    margin-right: 16upx;
  }
}

.gh-3 input {
  height: 90upx;
  font-size: 28upx;
}
.code {
  color: #4a4aff;
  font-size: 30rpx;
  margin-top: 20rpx;
}
.gh-1 {
  width: 686upx;
  margin: 0 auto;
  margin-top: 150upx;

  .gh-2 {
    font-size: 50upx;
    color: #fff;
  }

  .gh-5 {
    font-size: 24upx;
    color: #ccc;
    margin-top: 40upx;
  }

  .gh-3 {
    font-size: 24upx;
    color: #ffffff;
    margin: 40upx 0;
    border-bottom: 1upx solid #666;
    > view {
      overflow: hidden;
      input {
        float: left;
        width: 490rpx;
      }
      button {
        margin-top: 10rpx;
        float: right;
        width: 190rpx;
      }
    }
  }

  .gh-4 {
    width: 590upx;
    height: 90upx;
    margin: 0 auto;
    line-height: 90upx;
    margin-top: 120upx;
  }
}
</style>
